<template>
  <div id="app">
    <div>
      <van-popup v-model="show" class="popo">
        <div v-for="(item, index) in popo_btn" :key="index">
          <br />
          <van-button class="vant_btn" plain :type="item.btn ? popo_active : popo_inactive">{{
            item.title
          }}</van-button>
        </div>
      </van-popup>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
 
    return {  
      show: false,

      // last_page : '',

      popo_btn: [
        { btn: true, title: "返回上个页面" },
        { btn: false, title: "返回首页" },
        { btn: false, title: "我的运动数据" },
      ],

      popo_active: "warning",

      popo_inactive: "default",
    };
  },

  mounted() {
    document.addEventListener("keydown", this.showPopup);
  },

  methods: {
    showPopup(e) {
      var key = window.event ? e.keyCode : e.which;
      if (this.show == true) {
        switch (key) {
          case 38:
            for (let i = this.popo_btn.length - 1; i > 0; i--) {
              if (this.popo_btn[i].btn == true) {
                this.popo_btn[i].btn = false;
                this.popo_btn[i - 1].btn = true;
                break;
              }
            }
            break;
          case 40:
            for (let i = 0; i < this.popo_btn.length; i++) {
              if (this.popo_btn[i + 1] == null) {
                console.log("最后一个~无法向下");
                break;
              }
              if (this.popo_btn[i].btn == true) {
                this.popo_btn[i].btn = false;
                this.popo_btn[i + 1].btn = true;
                break;
              }
            }
            break;
          case 13:
            console.log(111);
            for(let i = 0; i < this.popo_btn.length; i++){
              if( this.popo_btn[i].btn == true)  
              {
                if( this.popo_btn[i].title == '返回上个页面')
                {
                  alert(this.$store.state.last_page)
                  // this.$router.push({
                  //   name: this.$store.state.last_page[this.$store.state.last_page.length - 1]
                  // })
                  this.$store.commit('delete')
                  this.show = false
                }else if(this.popo_btn[i].title == '返回首页')
                {
                  this.$store.commit('clear')
                  if(this.$store.state.last_page == [])
                  {
                    alert('别跳了叼你')
                  } else {
                    this.$router.push({
                    name:'index'
                  })
                  }
                  this.show = false
                }else if(this.popo_btn[i].title == '我的运动数据')
                {
                  this.$router.push({
                    name:'my_data'
                  })
                  this.show = false
                }
              }
            }
            break;
        }
      } else {
        switch (key) {
          case 9:
            this.show = true;
        }
      }
    },
  },

  // computed:{
  //   last_page(){
  //     return this.$store.state.last_page
  //   }
  // }
};
</script>

<style>
.vant_btn{
  background: transparent !important;
  color: white !important;
}

.popo {
  width: 40%;
  height: 35%;
  text-align: center;
  background-color: black !important;
  background-image: radial-gradient(
      white,  
      rgba(255, 255, 255, 0.2) 2px,
      transparent 40px
    ),
    radial-gradient(white, rgba(255, 255, 255, 0.15) 1px, transparent 30px),
    radial-gradient(white, rgba(255, 255, 255, 0.1) 2px, transparent 40px),
    radial-gradient(
      rgba(255, 255, 255, 0.4),
      rgba(255, 255, 255, 0.1) 2px,
      transparent 30px
    ) !important;
  background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px !important;
  background-position: 0 0, 40px 60px, 130px 270px, 70px 100px !important;
}
</style>